Visaptveroša rokasgrāmata par Flask veidņu mantošanu, izmantojot Jinja2, aplūkojot bāzes veidnes, bloku definīcijas un praktiskus piemērus efektīvai tīmekļa izstrādei.
Flask veidņu mantošana: Jinja2 veidņu organizēšanas apguve
Tīmekļa izstrādē ir būtiski uzturēt konsekventu izskatu un sajūtu vairākās lapās. Flask, populārs Python tīmekļa ietvars, izmanto Jinja2, elastīga un ātra veidņu dzinēja, spēku, lai to atvieglotu, izmantojot veidņu mantošanu. Veidņu mantošana ļauj definēt bāzes veidni ar kopīgiem elementiem un pēc tam to paplašināt citās veidnēs, veicinot koda atkārtotu izmantošanu un vienkāršojot uzturēšanu. Šis raksts sniedz visaptverošu rokasgrāmatu par Flask veidņu mantošanu ar Jinja2, aptverot tās principus, ieviešanu un labākās prakses.
Kas ir veidņu mantošana?
Veidņu mantošana ir dizaina šablons, kas ļauj izveidot bāzes veidni, kurā ir jūsu vietnes pamata struktūra un izkārtojums. Bērnu veidnes pēc tam var mantot šo bāzes veidni un pārrakstīt noteiktas sadaļas vai 'blokus', lai pielāgotu savu saturu. Šī pieeja samazina koda dublēšanos, nodrošina konsekvenci un vienkāršo atjauninājumus visā jūsu tīmekļa lietotnē.
Iedomājieties to kā mājas projektu. Bāzes veidne ir kopējais dizains, ieskaitot pamatus, sienas un jumtu. Katra atsevišķa istaba (bērna veidne) manto pamatstruktūru, bet to var pielāgot ar dažādiem grīdas segumiem, krāsojumu un mēbelēm.
Veidņu mantošanas priekšrocības
- Koda atkārtota izmantošana: Izvairieties no lieka koda, definējot kopīgos elementus bāzes veidnē un atkārtoti izmantojot tos vairākās lapās.
- Konsekvence: Nodrošiniet konsekventu izskatu un sajūtu visā vietnē, uzturot vienu patiesības avotu koplietojamiem elementiem, piemēram, galvenēm, kājenēm un navigācijas izvēlnēm.
- Uzturēšana: Vienkāršojiet atjauninājumus un modifikācijas, veicot izmaiņas bāzes veidnē, kas automātiski tiks pārnestas uz visām bērnu veidnēm.
- Organizācija: Strukturējiet savas veidnes loģiskā un hierarhiskā veidā, padarot jūsu koda bāzi vieglāk saprotamu un pārvaldāmu.
- Samazināts izstrādes laiks: Ietaupiet laiku un pūles, izmantojot bāzes veidni kā sākumpunktu jaunām lapām, nevis veidojot tās no nulles.
Galveno jēdzienu izpratne
1. Bāzes veidne
Bāzes veidne ir jūsu veidņu mantošanas struktūras pamats. Tā satur kopīgos elementus, kas tiks koplietoti visās vai lielākajā daļā jūsu vietnes lapu. Tas parasti ietver HTML struktūru, CSS stila lapas, JavaScript failus, galveni, kājeni un navigācijas izvēlni.
Pamata bāzes veidnes piemērs (base.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}My Website{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
Šajā piemērā mēs definējam pamata HTML struktūru ar galveni, navigācijas izvēlni, galvenā satura apgabalu un kājeni. Ievērojiet {% block %} tagus, kas definē sadaļas, kuras var pārrakstīt bērnu veidnēs.
2. Bloku definīcijas
Bloki ir vietturi bāzes veidnē, kurus var aizstāt vai modificēt bērnu veidnes. Tie tiek definēti, izmantojot {% block %} un {% endblock %} tagus. Bloki ļauj ievietot specifisku saturu dažādās bāzes veidnes daļās.
Iepriekšminētajā base.html piemērā mēs esam definējuši divus blokus:
title: Šis bloks definē HTML dokumenta nosaukumu.content: Šis bloks definē lapas galvenā satura apgabalu.
3. Bērnu veidnes
Bērnu veidnes manto bāzes veidni un var pārrakstīt bāzes veidnē definētos blokus. Lai mantotu bāzes veidni, izmantojiet {% extends %} tagu bērna veidnes sākumā.
Bērna veidnes piemērs (index.html), kas paplašina base.html veidni:
{% extends 'base.html' %}
{% block title %}Home - My Website{% endblock %}
{% block content %}
<h2>Welcome to the Home Page!</h2>
<p>This is the content of the home page.</p>
{% endblock %}
Šajā piemērā mēs paplašinām base.html veidni un pārrakstām title un content blokus. title bloks tiek iestatīts uz "Home - My Website", un content bloks tiek aizstāts ar sākumlapai specifisko saturu.
4. super() funkcija
super() funkcija ļauj piekļūt bāzes veidnē definēta bloka saturam no bērna veidnes. Tas ir noderīgi, ja vēlaties pievienot vai modificēt bloka saturu, pilnībā to neaizstājot.
Piemērs, kā izmantot super(), lai pievienotu saturu content blokam:
{% extends 'base.html' %}
{% block content %}
{{ super() }}
<p>This is additional content added to the base template's content block.</p>
{% endblock %}
Šajā piemērā super() funkcija ievieto oriģinālo content bloka saturu no base.html veidnes, un pēc tam bērna veidne pievieno savu saturu zem tā.
Veidņu mantošanas ieviešana Flask
Lai izmantotu veidņu mantošanu Flask, jums ir jāorganizē savas veidnes loģiskā direktoriju struktūrā un jākonfigurē Flask, lai atrastu jūsu veidnes.
1. Direktoriju struktūra
Bieži izmantota direktoriju struktūra Flask veidnēm ir šāda:
my_project/
app.py
templates/
base.html
index.html
about.html
contact.html
static/
style.css
script.js
Šajā struktūrā templates direktorija satur visas HTML veidnes, ieskaitot bāzes veidni un bērnu veidnes. static direktorija satur statiskos failus, piemēram, CSS stila lapas un JavaScript failus.
2. Flask konfigurācija
Pēc noklusējuma Flask meklē veidnes direktorijā ar nosaukumu templates tajā pašā direktorijā, kur atrodas jūsu lietotne. To var pielāgot, iestatot Flask lietotnes objekta atribūtu template_folder.
Piemērs, kā konfigurēt Flask, lai izmantotu pielāgotu veidņu mapi:
from flask import Flask, render_template
app = Flask(__name__, template_folder='my_templates')
@app.route('/')
def index():
return render_template('index.html')
3. Veidņu renderēšana
Lai renderētu veidni Flask, izmantojiet render_template() funkciju. Šī funkcija kā argumentu pieņem veidnes faila nosaukumu un atgriež renderēto HTML virkni.
Piemērs, kā renderēt index.html veidni:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
Renderējot bērna veidni, Flask automātiski iekļauj bāzes veidni un piemēro bērna veidnē definētos bloku pārrakstījumus.
Praktiski piemēri
1. piemērs: Vienkāršs emuārs
Izveidosim vienkāršu emuāru ar bāzes veidni un atsevišķām veidnēm emuāra ierakstiem.
base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}My Blog{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2023 My Blog</p>
</footer>
</body>
</html>
post.html:
{% extends 'base.html' %}
{% block title %}{{ post.title }} - My Blog{% endblock %}
{% block content %}
<h2>{{ post.title }}</h2>
<p><em>Published on: {{ post.date }}</em></p>
<p>{{ post.content }}</p>
{% endblock %}
Šajā piemērā post.html veidne paplašina base.html veidni un pārraksta title un content blokus ar emuāra ieraksta virsrakstu, datumu un saturu. Mainīgais post tiek nodots veidnei no Flask maršruta.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
posts = [
{
'title': 'First Blog Post',
'date': '2023-10-27',
'content': 'This is the content of the first blog post.'
},
{
'title': 'Second Blog Post',
'date': '2023-10-28',
'content': 'This is the content of the second blog post.'
}
]
@app.route('/')
def index():
return render_template('index.html', posts=posts)
@app.route('/post/<int:post_id>')
def post(post_id):
post = posts[post_id]
return render_template('post.html', post=post)
2. piemērs: Vairāku valodu vietne
Iedomājieties, ka veidojat vietni, kas atbalsta vairākas valodas. Veidņu mantošana var palīdzēt pārvaldīt dažādus teksta elementus katrā lapā. Jūs varētu izveidot bāzes veidni ar vietturiem tulkotam tekstam un pēc tam izveidot bērnu veidnes katrai valodai. Piemēram, pieņemsim, ka jums ir bāzes veidne un vēlaties atbalstīt angļu un franču valodu.
base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">{% block home_link %}Home{% endblock %}</a></li>
<li><a href="/about">{% block about_link %}About{% endblock %}</a></li>
</ul>
</nav>
<main>{% block content %}{% endblock %}</main>
</body>
</html>
index_en.html (angļu versija):
{% extends "base.html" %}
{% block title %}Welcome to My Website{% endblock %}
{% block home_link %}Home{% endblock %}
{% block about_link %}About{% endblock %}
{% block content %}
<h1>Welcome!</h1>
<p>This is the English version of the homepage.</p>
{% endblock %}
index_fr.html (franču versija):
{% extends "base.html" %}
{% block title %}Bienvenue sur mon site web{% endblock %}
{% block home_link %}Accueil{% endblock %}
{% block about_link %}À propos{% endblock %}
{% block content %}
<h1>Bienvenue !</h1>
<p>Ceci est la version française de la page d'accueil.</p>
{% endblock %}
Šajā vienkāršotajā piemērā katra valodas versija paplašina bāzes veidni un nodrošina tulkoto tekstu virsrakstam, navigācijas saitēm un galvenajam saturam. Šī pieeja atvieglo dažādu jūsu vietnes valodu versiju pārvaldību.
Labākās prakses
- Uzturiet bāzes veidni vienkāršu: Bāzes veidnei vajadzētu saturēt tikai būtiskos elementus, kas ir kopīgi visām lapām.
- Izmantojiet aprakstošus bloku nosaukumus: Izvēlieties bloku nosaukumus, kas skaidri norāda to mērķi.
- Organizējiet savas veidnes loģiski: Grupējiet saistītās veidnes kopā direktorijās.
- Izvairieties no dziļi ligzdotas mantošanas: Ierobežojiet savas mantošanas hierarhijas dziļumu, lai izvairītos no sarežģītības.
- Izmantojiet
super()funkciju apdomīgi: Izmantojietsuper()funkciju tikai tad, ja nepieciešams pievienot vai modificēt bloka saturu no bāzes veidnes. - Apsveriet veidņu komponentu izmantošanu: Sarežģītākām vietnēm apsveriet iespēju sadalīt savas veidnes mazākos, atkārtoti izmantojamos komponentos. To var panākt ar iekļaušanu (includes) vai makro (macros) Jinja2, taču tiem vajadzētu papildināt, nevis aizstāt labu mantošanas stratēģiju.
Papildu tehnikas
1. Nosacīta bloku pārrakstīšana
Jūs varat izmantot nosacījuma priekšrakstus savās veidnēs, lai nosacīti pārrakstītu blokus, pamatojoties uz noteiktiem nosacījumiem. Tas ļauj pielāgot jūsu lapu saturu, pamatojoties uz lietotāju lomām, preferencēm vai citiem faktoriem.
{% extends 'base.html' %}
{% block content %}
{% if user.is_authenticated %}
<h2>Welcome, {{ user.username }}!</h2>
<p>This is the content for authenticated users.</p>
{% else %}
<h2>Welcome!</h2>
<p>Please log in to access more content.</p>
{% endif %}
{% endblock %}
2. Makro izmantošana
Jinja2 makro ir līdzīgi funkcijām Python. Tie ļauj definēt atkārtoti izmantojamus HTML koda fragmentus, kurus var izsaukt no jūsu veidnēm. Makro var izmantot, lai izveidotu veidņu komponentus, piemēram, formas elementus, navigācijas izvēlnes un attēlu galerijas.
Piemērs, kā definēt makro atsevišķā failā (macros.html):
{% macro input(name, type='text', value='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
Piemērs, kā importēt un izmantot makro veidnē:
{% from 'macros.html' import input %}
<form>
{{ input('username') }}
{{ input('password', type='password') }}
<button type="submit">Submit</button>
</form>
3. Veidņu filtri
Veidņu filtri ļauj modificēt mainīgo izvadi jūsu veidnēs. Jinja2 nodrošina vairākus iebūvētus filtrus, piemēram, capitalize, lower, upper un date. Jūs varat definēt arī savus pielāgotos filtrus.
Piemērs, kā izmantot date filtru datuma formatēšanai:
<p>Published on: {{ post.date | date('%Y-%m-%d') }}</p>
Noslēgums
Flask veidņu mantošana ar Jinja2 ir spēcīga tehnika jūsu veidņu organizēšanai, koda atkārtotas izmantošanas veicināšanai un konsekvences nodrošināšanai visā jūsu tīmekļa lietotnē. Izprotot bāzes veidņu, bloku definīciju un bērnu veidņu galvenos jēdzienus, jūs varat izveidot labi strukturētas un uzturamas veidnes, kas vienkāršo jūsu tīmekļa izstrādes darbplūsmu. Pieņemiet DRY (Don't Repeat Yourself - Neatkārtojies) principu un izmantojiet veidņu mantošanu, lai veidotu stabilas un mērogojamas tīmekļa lietotnes.
Šī visaptverošā rokasgrāmata ir aptvērusi Flask veidņu mantošanas fundamentālos aspektus. Sekojot šajā rakstā sniegtajiem piemēriem un labākajām praksēm, jūs varat efektīvi ieviest veidņu mantošanu savos Flask projektos un izveidot labi organizētas, uzturamas un konsekventas tīmekļa lietotnes globālai auditorijai. Atcerieties pielāgot šīs tehnikas savu projektu specifiskajām vajadzībām un izpētīt Jinja2 papildu funkcijas, lai vēl vairāk uzlabotu savas veidņu dizaina iespējas.